import 'package:flutter/material.dart';

class ListViewDemoII extends StatefulWidget {
  const ListViewDemoII({Key? key}) : super(key: key);

  @override
  State<ListViewDemoII> createState() => _ListViewDemoIIState();
}

class _ListViewDemoIIState extends State<ListViewDemoII> {

  List list = [];
  ScrollController scrollController = new ScrollController();
  num offsetFlag = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    for(int i = 0;i<100;i++){
      list.add("items $i");
    }
    // 添加滑动监听
    scrollController.addListener(() {
      // offset 指的是scrollControll 监听的listview 滑动的顶部 与listview的距离
      num offset = scrollController.offset;
      print("监听到了滑动$offset");

      if(offset == 0){
        offsetFlag = 0;
      }else if(offset <0){
        offsetFlag = 1;

      }else{
        offsetFlag = 2;
      }
      setState(() {
        
      });
      if(scrollController.position.pixels == scrollController.position.maxScrollExtent){
        print("滑倒最底部");
        loadMore(); // 加载更多
      }

    });

  }
  @override
  Widget build(BuildContext context) {
    IconData iconData = Icons.home;
    if(offsetFlag == 0){
      iconData = Icons.home;
    }else if(offsetFlag == 1){
      iconData = Icons.arrow_downward;
    }else{
      iconData = Icons.arrow_upward;
    }
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView 列表"),
      ),
      // 用来加载 列表式布局
      // body: ListView(
      //   // ziwidget的方向
      //   scrollDirection: Axis.vertical,
      //   // 回弹效果
      //   physics: BouncingScrollPhysics(),
      //   children: [
      //     Container(color:Colors.grey,height: 84,margin: EdgeInsets.all(10),),
      //     Container(color:Colors.grey,height: 84,margin: EdgeInsets.all(10),),
      //     Container(color:Colors.grey,height: 100,margin: EdgeInsets.all(10),),
      //     Container(color:Colors.grey,height: 184,margin: EdgeInsets.all(10),),
      //     Container(color:Colors.grey,height: 84,margin: EdgeInsets.all(10),),
      //     Container(color:Colors.grey,height: 154,margin: EdgeInsets.all(10),),
      //   ],
      // ),
      // body: ListView.builder(
      //   itemBuilder: (BuildContext context,int index){
      //     // 用来构建 子条目
      //     // index 是条目的下标
      //     return Container(
      //       color: Colors.grey[300],
      //       height: 88,
      //       margin: EdgeInsets.all(5),
      //       child: Text(list[index]),
      //     );
      //   },
      //   // 数据的个数
      //   itemCount: list.length,

      //   ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          // 回到顶部
          if(offsetFlag == 2){
            scrollController.animateTo(-100, duration: new Duration(microseconds: 1000), curve: Curves.easeIn);
          }
        },
        child: Icon(iconData),  
      ),
      //  刷新组件
      body: RefreshIndicator(
        // 刷新组件圆圈 距离顶部的距离
        displacement: 100,
        // 刷新组件圆圈的颜色
        color: Colors.red,
        // 刷新组件圆圈的背景色
        backgroundColor: Colors.grey,
        child: buildListView(),
        onRefresh: onRefresh,
        )

    );
    
  }
  Future<void> onRefresh() async{
    print("下拉刷新");
    list.clear();
    await Future.delayed(Duration(microseconds: 3000),(){
        print("下拉刷新结束");
        setState(() {
          for(int i =0; i<30;i++){
            list.add("下拉刷新 数据$i");
          }
        });

    });
  }
  //  加载 列表式布局 自带分隔线
  Widget buildListView(){
    return ListView.separated(
        // 用来监听处理listView 的滑动事件
        controller: scrollController,
        // 构建分隔线
        separatorBuilder: (context, index) {
          if(index%2 == 0){
            return Container(height: 2,color:Colors.blue);
          }else{
            return Container(height: 2,color:Colors.red);
          }
        }
          
        ,
        itemBuilder: (BuildContext context,int index){
          if(index == list.length){
            return Container(
              alignment: Alignment.center,height: 88,color: Colors.grey,
              child: Text("加载更多",style:TextStyle(color: Colors.white)));
          }
          // 用来构建 子条目
          // index 是条目的下标
          return Container(
            color: Colors.grey[300],
            height: 88,
            margin: EdgeInsets.all(5),
            child: Text(list[index]),
          );
        },
        // 数据的个数
        itemCount: list.length,

        );
  }
  void loadMore(){
    for(int i =0; i<30; i++){
      setState(() {
        list.add("加载更多数据 $i");
      });
    }
  }
}